<template>
  <div
    :style="{
      backgroundImage: `url(${bgImage})`,
      height: height + 'px',
    }"
    class="common-header"
  >
    <slot></slot>

    <wave></wave>
  </div>
</template>

<script setup>
import wave from "@/components/wave/index.vue";

const props = defineProps({
  bgImage: {
    type: String,
    default: "https://ik.imagekit.io/mpjl8xreo/tools.png", // 保持路径字符串
  },
  height: {
    type: Number,
    default: 380,
  },
});
</script>

<style lang="scss" scoped>
.common-header {
  position: relative;
  width: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background-color: #0009;
  }
}
</style>
